<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="X-UA-Compatible" content="chrome=1;IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- vue2 -->
    <script src="/examples/js/vue.min.js"></script>
    <!-- 示例演示-公共样式 -->
    <link rel="stylesheet" href="/examples/css/railView.css" type="text/css" />
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- RailUnit 样式 -->
    <link rel="stylesheet" href="/RailUnit/RailUnit.umd.css" type="text/css">
    <!-- RailUnit 插件 -->
    <script type="text/javascript" src="/RailUnit/RailUnit.umd.js" charset="utf-8"></script>
    <style>
        .panel {
            position: absolute;
            top: 40px;
            left: 45px;
            z-index: 99;
            background: rgba(34, 45, 50, 0.7);
            border-radius: 3px;
            max-width: 230px;
            line-height: 30px;
            color: #ffff;
            padding: 10px;
        }
    </style>

    <body>
        <div id="app">
            <div id="panel" class="panel">
                <label>帧率（fps）：</label>
                <!-- <span >{{info.frames_per_second || 0 }}</span><br> -->
                <span >{{info.edgesLayer || 0 }}</span><br>
                <label>请求数量：</label>
                <!-- <span >{{info.draw_call_count || 0 }}</span><br> -->
                <span >{{info.entities || 0 }}</span><br>
                <label>片面数量：</label>
                <!-- <span >{{info.triangle_count || 0 }}</span><br> -->
                <span >{{info.triangles || 0 }}</span><br>
                <label for="male">线段数量：</label>
                <!-- <span >{{info.line_segment_count || 0 }}</span><br> -->
                <span >{{info.lines || 0 }}</span><br>
                <label for="male">点数量：</label>
                <!-- <span >{{info.point_count || 0 }}</span><br> -->
                <span >{{info.points || 0 }}</span><br>
            </div>
            <div id="viewer" style="width:100%;height:100%;position:relative;float:left"></div>
        </div>
        <script id="viewerStartup">
             const vm = new Vue({
                el: '#app',
                data: {
                    bimViewer: null,
                    timeout: null,
                    info: {},
                },
                mounted () {
                    this.initViewer()
                    this.getInfo()
                },
                methods: {
                    // 初始化模型
                    initViewer() {
                        this.bimViewer = new MyViewer({
                        serverUrl: '/RailUnit/',
                        containerElement: document.getElementById('viewer'),
                        nodeVisible: false
                    })
                    this.bimViewer.loadModel2('jianzhu')
                    },
                    getInfo () {
                        this.timeout = setInterval(() => {
                            const res = this.bimViewer.getStatistics()
                            if(res) {
                                this.info = res
                            }
                            console.log(res, 'getStatistics');
                        }, 1000);
                    }
                },
                beforeDestroy () {
                    clearInterval(this.timeout)
                },
             })
        </script>
    
    </body>
</html>
